<template>
  <Modal v-model="modal" :title="id ? '编辑活动详情' : '新建活动详情'">
    <Form :model="form" ref="form" :rules="rules" :label-width='100'>
        <FormItem label="活动名称" prop="title">
            <Input v-model="form.title" placeholder="请输入活动名称" maxlength="4"/>
        </FormItem>
        <FormItem label="日期" prop="date">
            <DatePicker type="datetimerange" placement="bottom-end" v-model="form.date"></DatePicker>
        </FormItem>
        <FormItem label="跳转促销活动">
            <i-switch v-model="form.jump" size="large" @on-change="onChangeJump">
                <span slot="open">是</span>
                <span slot="close">否</span>
            </i-switch>
        </FormItem>
        <FormItem label="选择促销活动" v-if="form.jump" prop="linkId">
            <ActivitySelect v-if="modal" ref="activity" v-model="form.linkId" @onchange="onchange"></ActivitySelect>
        </FormItem>
        <FormItem label="跳转链接" v-show="!form.jump">
            <Input v-model="form.url" placeholder="请输入跳转链接"/>
        </FormItem>
        <FormItem label="背景颜色" prop="colorValue">
            <RadioGroup v-model="form.colorValue" class="cal-colors">
              <Radio :label="item" v-for="item in color" :key="item.id">
                  <span class="cal-item" :style="'background:' + item"></span>
              </Radio>
          </RadioGroup>
        </FormItem>
    </Form>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
</Modal>
</template>
<script>
import ActivitySelect from '@/components/ActivitySelect'
import { formatDate, getQueryString } from '@/util'
export default {
  components: {
    ActivitySelect
  },
  data() {
    return {
      title: '',
      id: null,
      modal: false,
      btnDisabled: false,
      form: {
        title: '',
        date: [],
        jump: true,
        linkId: '',
        url: '',
        name: '',
        tagId: '',
        colorValue: '#F2B81E'
      },
      color: ['#F2B81E', '#E1342C', '#1D8DEF', '#E5721D', '#C30505', '#F31492', '#532CE1', '#0C66F5', '#06F2BE', '#13E678'],
      rules: {
        title: [{ required: true, type: 'string', message: '请填写活动名称', trigger: "blur" }],
        date: [{
            required: true,
            message: "请选择活动日期",
            trigger: "blur",
            type: "array",
            fields: {
              0: { type: "date", required: true, message: "请输入起止日期" },
              1: { type: "date", required: true, message: "请输入起止日期" }
            }
          }],
        linkId: [{required: true, type: 'string', message: '请选择活动名称', trigger: "blur"}],
        colorValue: [{required: true, type: 'string', message: '请选择背景颜色'}]
      },
      status: 'pass'
    }
  },
  methods: {
    openModal() {
      this.$refs.form.resetFields()
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onchange(val) {
      if (val) {
        this.form.tagId = val.tagId
        this.form.name = val.tag
      }
    },
    getInfo(id) {
      this.$refs.form.resetFields()
      this.modal = true
      this.status = 'loading'
      this.$ajaxGet(`/activity/calendar/item/info`, {id: id}).then(data => {
        let q = decodeURIComponent(data.url)
        let tagId = getQueryString(q, 'factoryActivityId')
        let name = getQueryString(q, 'factoryActivityName')
        this.id = data.id
        this.form.title = data.title
        this.form.date = [data.startDate, data.endDate]
        this.form.jump = data.linkType === 0
        this.form.linkId = data.linkId
        this.form.url = data.url
        this.form.colorValue = data.colorValue
        this.form.tagId = tagId
        this.form.name = name
        this.status = 'pass'
      })
    },
    onChangeJump(status) {
      this.form.url = ''
      setTimeout(() => {
        this.$refs.form.resetFields()
      })
    },
    onSave() {
      if (this.btnDisabled) return
      this.btnDisabled = true
      this.$refs.form.validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let form = this.form
          let param = {
            title: form.title,
            startDate: formatDate(form.date[0], true),
            endDate: formatDate(form.date[1], true),
            linkId: form.linkId,
            url: form.url,
            colorValue: form.colorValue
          }
          if (form.jump) {
            param.linkType = 0
            param.url = 'zcckj://tire_purchase?factoryActivityId=' + form.tagId + '&factoryActivityName=' + form.name
          }
          if (this.id) param.id = this.id
          this.$jsonPost('/activity/calendar/save', param).then(data => {
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$emit('complete')
            this.$refs.form.resetFields()
            this.btnDisabled = false
            this.closeModal()
          }).catch(() => {
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>